<div class="fn-login-head">
  <div class="fn-login-head-box">
    <div class="fn-one"><img [src]="fnOneSrc"></div>
    <div class="fn-two"><span>集群车宝</span></div>
    <div class="fn-the"><span>{{fntTheText}}</span></div>
  </div>
  <div class="fn-login-head-value">
    <span>增效、降本、提升运营效率、提高用户满意度</span>
  </div>
  <div class="fn-login-head-btn" (click)="openDownloadApp()">
    <span>下载APP</span>
    <img [src]="downloadApp">
  </div>
</div>

<div class="fn-login">

  <form apes-form [formGroup]="form" (ngSubmit)="login()" role="form" class="fn-form">
    <apes-tabset [apesAnimated]="false" [apesShowPagination]="false" class="tabs" (apesSelectChange)="switch($event)">
      <apes-tab apesTitle="密码登录">
        <apes-form-item class="fn-first-item">
          <apes-form-control>
            <apes-input-group [apesPrefix]="prefixTemplate" apesSize="large">
              <input #input class="fn-login-input" apes-input formControlName="userName" placeholder="请输入工号">
            </apes-input-group>
            <ng-template #prefixTemplate>
              <img [src]="'./assets/tmp/img/fn/moble.png'"/>
            </ng-template>
          </apes-form-control>
        </apes-form-item>
        <apes-form-item>
          <apes-form-control>
            <apes-input-group apesSize="large" [apesPrefix]="prefixTemplatePass" [apesSuffix]="suffixTemplate">
              <input class="fn-login-input" apes-input [type]="passwordVisible ? 'text' : 'password'"
                     formControlName="password" placeholder="请输入登录密码" (keyup.enter)="login()">
            </apes-input-group>
            <ng-template #prefixTemplatePass>
              <img [src]="'./assets/tmp/img/fn/password.png'"/>
            </ng-template>
            <ng-template #suffixTemplate>
              <img [src]="passwordVisible ? passwordSrcEye : passwordSrcEye_invisible"
                   (click)="passwordVisible = !passwordVisible"/>
            </ng-template>
          </apes-form-control>
        </apes-form-item>
        <apes-form-item style="display: none">
          <apes-form-control [apesValidateStatus]="post">
            <select class="apes-input-lg apes-input" formControlName="post" (change)="select($event.target)">
              <option value="" [selected]="!postList">请选择岗位</option>
              <option *ngFor="let post of postList;index as i" [value]="post">{{post.name}}</option>
            </select>
            <apes-form-explain *ngIf="(post.dirty || post.touched) && post.errors?.required">请选择岗位！</apes-form-explain>
          </apes-form-control>
        </apes-form-item>
      </apes-tab>

      <apes-tab apesTitle="验证码登录">
        <apes-form-item class="fn-first-item">
          <apes-form-control [apesValidateStatus]="mobile">
            <apes-input-group apesSize="large" [apesPrefix]="prefixTemplate">
              <input class="fn-login-input" apes-input formControlName="mobile" placeholder="手机号"
                     (ngModelChange)="mobileChanges(mobile.value)" >
            </apes-input-group>
          </apes-form-control>
        </apes-form-item>
        <apes-form-item>
          <apes-form-control [apesValidateStatus]="captcha">
            <apes-input-group [apesPrefix]="prefixTemplateEmil" [apesAddOnAfter]="suffixIconButton" apesSize="large"
                              class="fn-captcha-group"
                              [class.fn-captcha-group-border]="inputNum === 1">
              <input class="fn-login-input fn-captcha-btn" apes-input formControlName="captcha" placeholder="验证码"
                     (keyup.enter)="login()" (focus)="inputCaptcha(1)" (blur)="inputCaptcha(0)">
            </apes-input-group>
            <ng-template #prefixTemplateEmil>
              <img [src]="'./assets/tmp/img/fn/emil.png'"/>
            </ng-template>
            <ng-template #suffixIconButton>
              <button apes-button apesSize="default" (click)="getCaptcha()"
                      [disabled]="catpcha ? catpcha : count > 0 ? true : false"
                      class="apes-btn__block fn-btn">
                {{ count ? '重新发送 '+count+'s' : '获取验证码' }}
              </button>
            </ng-template>

          </apes-form-control>
        </apes-form-item>
        <apes-form-item style="display: none">
          <apes-form-control [apesValidateStatus]="post">
            <select class="apes-input-lg apes-input" formControlName="post" (change)="select($event.target)">
              <option value="" [selected]="!postList">请选择岗位</option>
              <option *ngFor="let post of postList;index as i" [value]="post">{{post.name}}</option>
            </select>
            <apes-form-explain *ngIf="(post.dirty || post.touched) && post.errors?.required">请选择岗位！</apes-form-explain>
          </apes-form-control>
        </apes-form-item>
      </apes-tab>
    </apes-tabset>

    <apes-alert *ngIf="error" [apesType]="'error'" [apesMessage]="error" [apesShowIcon]="true"
                class="mb-lg"></apes-alert>

    <apes-form-item class="fn-login-btn">
      <button apes-button
              apesType="primary"
              apesSize="large"
              [apesLoading]="false"
              [disabled]="!form.valid"
              class="apes-btn__block">
        登&nbsp;&nbsp;录
      </button>
    </apes-form-item>
  </form>

</div>

<div class="fn-right-img"></div>
